<template>
  <div class="photo-selector">
    <div class="selector-header">
      <div class="selector-title">{{ title }}</div>
      <div class="selector-actions">
        <el-button type="text" @click="selectAll">全选</el-button>
        <el-button type="text" @click="deselectAll">取消全选</el-button>
        <el-button type="text" @click="invertSelection">反选</el-button>
      </div>
    </div>
    
    <div class="selector-content" :style="contentStyle">
      <div 
        v-for="photo in photos" 
        :key="photo.id"
        class="photo-item"
        :class="{ 'photo-selected': isPhotoSelected(photo.id) }"
        @click="togglePhotoSelection(photo.id)"
      >
        <div class="photo-thumbnail">
          <img 
            :src="getThumbnailUrl(photo)" 
            :alt="photo.fileName"
            loading="lazy"
          />
          <div class="photo-select-overlay">
            <el-checkbox 
              :model-value="isPhotoSelected(photo.id)"
              @change="togglePhotoSelection(photo.id)"
              @click.stop
            />
          </div>
        </div>
        <div class="photo-info">
          <div class="photo-name" :title="photo.fileName">{{ photo.fileName }}</div>
          <div class="photo-date">{{ formatDate(photo.capturedAt || photo.createdAt) }}</div>
        </div>
      </div>
    </div>
    
    <div class="selector-footer">
      <div class="selection-info">
        已选择 {{ selectedPhotoIds.length }} 张照片
      </div>
      <div class="selector-actions">
        <el-button @click="handleCancel">取消</el-button>
        <el-button 
          type="primary" 
          :disabled="selectedPhotoIds.length === 0"
          @click="handleConfirm"
        >
          确认选择
        </el-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import { ElButton, ElCheckbox } from 'element-plus';
import type { Photo } from '@/types';

interface Props {
  photos: Photo[];
  title?: string;
  selectedIds?: string[];
  maxHeight?: number;
}

interface Emits {
  (e: 'cancel'): void;
  (e: 'confirm', photoIds: string[]): void;
}

const props = withDefaults(defineProps<Props>(), {
  title: '选择照片',
  selectedIds: () => [],
  maxHeight: 400
});

const emit = defineEmits<Emits>();

// 选中的照片ID
const selectedPhotoIds = ref<string[]>([...props.selectedIds]);

// 计算内容样式
const contentStyle = computed(() => {
  return {
    maxHeight: `${props.maxHeight}px`
  };
});

// 检查照片是否被选中
const isPhotoSelected = (photoId: string) => {
  return selectedPhotoIds.value.includes(photoId);
};

// 切换照片选择状态
const togglePhotoSelection = (photoId: string) => {
  const index = selectedPhotoIds.value.indexOf(photoId);
  if (index === -1) {
    selectedPhotoIds.value.push(photoId);
  } else {
    selectedPhotoIds.value.splice(index, 1);
  }
};

// 全选
const selectAll = () => {
  selectedPhotoIds.value = props.photos.map(photo => photo.id);
};

// 取消全选
const deselectAll = () => {
  selectedPhotoIds.value = [];
};

// 反选
const invertSelection = () => {
  const allIds = props.photos.map(photo => photo.id);
  selectedPhotoIds.value = allIds.filter(id => !selectedPhotoIds.value.includes(id));
};

// 获取缩略图URL
const getThumbnailUrl = (photo: Photo) => {
  if (photo.thumbnailPath) {
    return `file://${photo.thumbnailPath}`;
  }
  return `file://${photo.filePath}`;
};

// 格式化日期
const formatDate = (dateString: string) => {
  if (!dateString) return '未知';
  const date = new Date(dateString);
  return date.toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit'
  });
};

// 处理取消
const handleCancel = () => {
  emit('cancel');
};

// 处理确认
const handleConfirm = () => {
  emit('confirm', [...selectedPhotoIds.value]);
};
</script>

<style scoped lang="scss">
.photo-selector {
  display: flex;
  flex-direction: column;
  height: 100%;
  
  .selector-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    border-bottom: 1px solid var(--el-border-color-light);
    
    .selector-title {
      font-size: 16px;
      font-weight: 500;
    }
    
    .selector-actions {
      display: flex;
      gap: 8px;
    }
  }
  
  .selector-content {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    
    .photo-item {
      display: inline-block;
      width: 120px;
      margin: 0 8px 16px 0;
      cursor: pointer;
      border-radius: 8px;
      overflow: hidden;
      transition: all 0.2s ease;
      border: 2px solid transparent;
      
      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      }
      
      &.photo-selected {
        border-color: var(--el-color-primary);
      }
      
      .photo-thumbnail {
        position: relative;
        width: 100%;
        height: 120px;
        overflow: hidden;
        
        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
        
        .photo-select-overlay {
          position: absolute;
          top: 8px;
          right: 8px;
          background-color: rgba(0, 0, 0, 0.5);
          border-radius: 4px;
          padding: 4px;
          opacity: 0;
          transition: opacity 0.2s ease;
        }
      }
      
      .photo-info {
        padding: 8px 4px;
        
        .photo-name {
          font-size: 12px;
          font-weight: 500;
          color: var(--el-text-color-primary);
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        
        .photo-date {
          font-size: 10px;
          color: var(--el-text-color-secondary);
          margin-top: 2px;
        }
      }
      
      &:hover .photo-select-overlay {
        opacity: 1;
      }
      
      &.photo-selected .photo-select-overlay {
        opacity: 1;
      }
    }
  }
  
  .selector-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    border-top: 1px solid var(--el-border-color-light);
    
    .selection-info {
      font-size: 14px;
      color: var(--el-text-color-regular);
    }
    
    .selector-actions {
      display: flex;
      gap: 8px;
    }
  }
}
</style>